import React, {memo, useEffect, useState} from "react";
import fmRequest from '@/services'
import {HomeWarpper} from "@/views/home/style";
import HomeBanner from "@/views/home/c-cpns/home-banner";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
import {fetchHomeDataAction} from "@/store/modules/home/home";
import SectionHeader from "@/components/section-header";
import RoomItem from "@/components/room-item";

/**
 * @type {React.NamedExoticComponent<object>}
 */
const Home = memo(() => {
    /*
    *
    * */
    const {goodsPriceInfo} = useSelector((state) =>({
        goodsPriceInfo:state.home.goodsPriceInfo
    }),shallowEqual)

    const dispatch = useDispatch()
    useEffect(()=>{
        dispatch(fetchHomeDataAction())
    },[dispatch])

    return (
        <HomeWarpper>
            <HomeBanner />
            <div className="content-warp">
                <div className="good-price">
                    <SectionHeader title={goodsPriceInfo.title} subtitle="束带结发对接焊缝" />
                    <ul className="list-content">
                        {
                            goodsPriceInfo.list?.slice(0,8).map((item)=>{
                                return <RoomItem key={item.id} itemData={item} />
                            })
                        }
                    </ul>

                </div>
            </div>

        </HomeWarpper>
    )
})
export default Home
